<script setup lang="ts">
	import dialogCloseBtn from '@/static/owo/coupon-dialog-close.png';
	import CouponCard from '@/wxcomponents/coupon-card'
	import { formatDate } from '@/utils/datetime'
	import promoTitle from '@/static/owo/coupon-promo-title.png'
	import { ref } from "vue"

	defineProps<{
	  coupons: array
	}>()
	const emit = defineEmits(['close', 'confirm'])

	function onClose() {
		emit('close')
	}

	function onConfirm() {
		emit('confirm')
	}
</script>

<template>
	<view class="coupon-dialog-content">
		<image class="bg" src="/static/owo/coupon-dialog-bg.png" mode="widthFix" />
		<!-- <image class="close-btn" :src="dialogCloseBtn" mode="aspectFit" v-on:click="onClose" /> -->

		<!-- <image class="coupon-promo-title" :src="promoTitle" mode="widthFix" /> -->

		<scroll-view scroll-y="true" style="height: 420rpx;">
			<view class="coupon-list">
				<coupon-card v-for="(coupon, index) in coupons" :key="index" :title="coupon.name" :content="coupon.desc"
					:expire="formatDate(coupon.end)" :amount="coupon.showPrice" />
			</view>
		</scroll-view>
		<view class="coupon-confirm-btn" v-on:click="onConfirm" />
	</view>
</template>

<style>
	page {
		--dialog-background-color: transparent;
	}

	.coupon-dialog-content {
		width: 100%;
		height: 680rpx;
		position: relative;
		box-sizing: border-box;
		/* margin-top: 4em; */
		display: flex;
		flex-direction: column;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.coupon-dialog-content .bg {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}

	.coupon-dialog-content .close-btn {
		position: absolute;
		top: 15px;
		right: 10px;
		width: 20px;
		height: 20px;
	}

	.coupon-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.coupon-promo-title {
		width: 196px;
		margin: 0 auto 10px;
		display: block;
	}

	.coupon-confirm-btn {
		background-image: url('~@/static/owo/coupon-confirm-btn.png');
		background-size: cover;
		background-repeat: no-repeat;
		width: 130px;
		height: 44px;
		margin: 72px auto 0;
	}
</style>